<template>
  <div id="index"> 
    <!-- <ElImageShowcase url="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"/> -->
    <!-- <el-card title="详情">
    <el-grid-view
      labelWidth="50px"
      :count="4"
      :labelList="tableColumns"
      :data="gridView"
      :border="true"
      colGap='10px'
      size="mini"
    >
    </el-grid-view>
      
    </el-card> -->
      
   <!-- <div>
       <el-grid-view
      labelWidth="80px"
      :count="4"
      :labelList="tableColumns"
      :data="gridView"
      :border="true"
      colGap='10px'
      size="small"
    >
    </el-grid-view>
    </div>
    <br>
    <div>
       <el-grid-view
      labelWidth="80px"
      :count="4"
      :labelList="tableColumns"
      :data="gridView"
      :border="true"
      colGap='10px'
      size="medium"
    >
    </el-grid-view>
    </div>
    <br>
    <div>
       <el-grid-view
      labelWidth="80px"
      :count="4"
      :labelList="tableColumns"
      :data="gridView"
      :border="true"
      colGap='10px'
      size="big"
    >
    </el-grid-view>
    </div> -->
  <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="" srcset=""> -->
   
  <!-- <form-create :rule="rule" v-model="fApi" :option="option"></form-create> -->
    <!-- <el-simpleDialog :showViewModel.sync='show' title="111"></el-simpleDialog> -->
    <!-- <el-business-table
      v-model="fApi"
      :tableColumns="tableColumns"
      :tableOption="tableOption"
      :rule="[]"
      :getTableVoid="getTable"
    >
      
      <template slot="bfcw">
        <el-table-column
          show-overflow-tooltip
          prop="item.prop"
          label="item.label"
          width=""
        ></el-table-column>
      </template>
      <template slot-scope="scope">
        <el-button type="danger" @click="handleDelectClick(scope)" size="mini"
          >删除</el-button
        >
      </template>
    </el-business-table> -->
    {{value}}
     <el-cascader
    v-model="value"
    :options="options"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  name: 'index',
  components: {},
  props: {},
  data() {
    return {
      option: {},
      value: [],
      options: [],
      rule: [{
        isShowInclude: ['add', 'edit', 'look'],
        type: 'tree',
        title: '菜单权限配置',
        field: 'list',
        value: [],
        col: {
          span: 24
        },
        props: {
          showCheckbox: true,
          renderContent: (h, { node, data, store }) => {
            return (
              <span class="custom-tree-node">
                <span>{node.label}</span>
                <span>
                  <el-button size="mini" type="text">
                      Append
                  </el-button>
                  <el-button size="mini" type="text">
                      Delete
                  </el-button>
                </span>
              </span>
            );
          },
          data: [
            {
              label: '一级 1',
              children: [
                {
                  label: '二级 1-1',
                  children: [
                    {
                      label: '三级 1-1-1'
                    }
                  ]
                }
              ]
            },
            {
              label: '一级 2',
              children: [
                {
                  label: '二级 2-1',
                  children: [
                    {
                      label: '三级 2-1-1'
                    }
                  ]
                },
                {
                  label: '二级 2-2',
                  children: [
                    {
                      label: '三级 2-2-1'
                    }
                  ]
                }
              ]
            },
            {
              label: '一级 3',
              children: [
                {
                  label: '二级 3-1',
                  children: [
                    {
                      label: '三级 3-1-1'
                    }
                  ]
                },
                {
                  label: '二级 3-2',
                  children: [
                    {
                      label: '三级 3-2-1'
                    }
                  ]
                }
              ]
            }
          ],
          nodeKey: 'label',
          props: {
            children: 'children',
            label: 'label',
            key: 'label'
          }
        },
        emit: ['check']
      } ],
      tableOption: {
        slotWidth: '240px',
        showIndex: true,
        label: '操作'
      },
      tableColumns: [
        { prop: 'name', label: '所属角色' },
        { prop: 'sex', label: '账户' },
        { prop: 'age', label: '姓名' },
        { prop: 'address', label: ' 部门' },
        { prop: 'politicalStatus', label: '岗位' },
        { prop: 'politicalStatus', label: '手机号' }
      ],
      fApi: {}
    };
  },
  computed: {},
  created() { },
  mounted() {
    setTimeout(()=>{
      this.options = [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }];
      this.value = [ 'zhinan', 'shejiyuanze', 'fankui' ];
    }, 1000);
    // console.log(ElProgress);
  },
  methods: {
    // 获取表格数据
    getTable() {
      // eslint-disable-next-line no-undef
      return new Promise((res, rej) => {
        res({
          data: {
            list: [
              {
                id: 1,
                name: '张三',
                sex: '男',
                age: '25',
                address: '湖北省武汉市洪山区',
                politicalStatus: '党员'
              }
            ],
            total: 10
          }
        });
        rej('表格请求错误');
      });
    },
    test() {
      this.formData = this.fApi.formData();
    }
  }
};

</script>
<style lang='scss'>
.bor {
  border: 1px solid red;
}
html,body{
  margin: 0;
  padding: 0;
}
@mixin grid-col($row, $col) {
  display: grid;
  grid-template-columns: repeat($col, 1fr);
  grid-template-rows: repeat($row, 1fr);
  grid-gap: 20px;
}

.item {
  width: 100%;
  height: 100%;
  padding: 30px;
}

#index {
  width: 50vw;
  height: 50vh;
  padding: 0;
  img{
    width: 100%;
    height: 100%;
  }
  // @include grid-col(2, 3);
}
</style>